<template>
  <div class="login-page">
    <div class="login-content">
      <!-- Logo 和标题 -->
      <div class="login-header">
        <div class="logo">
          <van-icon name="photograph" class="logo-icon" />
        </div>
        <h1 class="app-title">喵趣AI</h1>
        <p class="app-subtitle">让您的猫咪变身创意主角</p>
      </div>
      
      <!-- 功能介绍 -->
      <div class="features">
        <div class="feature-item">
          <van-icon name="photo" />
          <span>AI智能生成</span>
        </div>
        <div class="feature-item">
          <van-icon name="palette" />
          <span>多种风格</span>
        </div>
        <div class="feature-item">
          <van-icon name="star-o" />
          <span>创意无限</span>
        </div>
      </div>
      
      <!-- 登录表单 -->
      <div class="login-form">
        <!-- 微信登录按钮 -->
        <van-button 
          type="success"
          size="large"
          block
          round
          icon="wechat"
          @click="wechatLogin"
          :loading="loginLoading"
          class="wechat-btn"
        >
          微信快捷登录
        </van-button>
        
        <!-- 或者分隔线 -->
        <div class="divider">
          <span>或</span>
        </div>
        
        <!-- 游客体验 -->
        <van-button 
          type="default"
          size="large"
          block
          round
          @click="guestLogin"
          class="guest-btn"
        >
          游客体验
        </van-button>
      </div>
      
      <!-- 服务条款 -->
      <div class="terms">
        <p>
          登录即表示您同意
          <span class="link" @click="showTerms">《服务协议》</span>
          和
          <span class="link" @click="showPrivacy">《隐私政策》</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '../stores/user'
import { Toast, Dialog } from 'vant'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

const loginLoading = ref(false)

// 微信登录
const wechatLogin = async () => {
  loginLoading.value = true
  
  try {
    // 在实际项目中，这里需要调用微信SDK获取code
    // 这里模拟登录过程
    const mockUserData = {
      nickname: '猫咪爱好者',
      avatar_url: 'https://example.com/avatar.jpg'
    }
    
    const result = await userStore.login(mockUserData)
    
    if (result.success) {
      Toast.success('登录成功')
      
      // 跳转到重定向页面或首页
      const redirect = route.query.redirect as string
      router.push(redirect || '/')
    } else {
      Toast.fail(result.error || '登录失败')
    }
  } catch (error: any) {
    Toast.fail(error.message || '登录失败')
  } finally {
    loginLoading.value = false
  }
}

// 游客登录
const guestLogin = async () => {
  try {
    const guestData = {
      nickname: '游客用户',
      avatar_url: ''
    }
    
    const result = await userStore.login(guestData)
    
    if (result.success) {
      Toast.success('登录成功')
      
      // 跳转到重定向页面或首页
      const redirect = route.query.redirect as string
      router.push(redirect || '/')
    } else {
      Toast.fail(result.error || '登录失败')
    }
  } catch (error: any) {
    Toast.fail(error.message || '登录失败')
  }
}

// 显示服务条款
const showTerms = () => {
  Dialog.alert({
    title: '服务协议',
    message: '这里是服务协议内容...'
  })
}

// 显示隐私政策
const showPrivacy = () => {
  Dialog.alert({
    title: '隐私政策',
    message: '这里是隐私政策内容...'
  })
}
</script>

<style scoped>
.login-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  padding: 20px;
}

.login-content {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.login-header {
  text-align: center;
  margin-bottom: 40px;
  color: white;
}

.logo {
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  backdrop-filter: blur(10px);
}

.logo-icon {
  font-size: 40px;
  color: white;
}

.app-title {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 8px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.app-subtitle {
  font-size: 16px;
  opacity: 0.9;
}

.features {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
  padding: 0 20px;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: white;
  font-size: 14px;
}

.feature-item .van-icon {
  font-size: 24px;
  opacity: 0.9;
}

.login-form {
  background: white;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.wechat-btn {
  background: #09bb07;
  border: none;
  font-weight: bold;
  margin-bottom: 20px;
}

.divider {
  text-align: center;
  position: relative;
  margin: 20px 0;
  color: #999;
}

.divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: #eee;
  z-index: 1;
}

.divider span {
  background: white;
  padding: 0 16px;
  position: relative;
  z-index: 2;
}

.guest-btn {
  color: #666;
  border-color: #ddd;
}

.terms {
  text-align: center;
  color: white;
  font-size: 12px;
  opacity: 0.8;
  line-height: 1.5;
}

.link {
  color: #ffd700;
  text-decoration: underline;
  cursor: pointer;
}
</style>